<template>
    <div width="80%">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 表单
                </el-breadcrumb-item>
                <el-breadcrumb-item>库存</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" width="100%">
            <div class="form-box" width="80%">

                <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">

                    <el-form-item label="单据类型" prop="s_type">
                        <el-select v-model="form.s_type" placeholder="请选择" class="a">
                            <el-option key="cgrk" label="采购入库" value="采购入库"></el-option>
                            <el-option key="tlrk" label="退料入库" value="退料入库"></el-option>
                            <el-option key="scru" label="生产入库" value="生产入库"></el-option>
                            <el-option key="xsrk" label="销售退货入库" value="销售退货入库"></el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="供应商" prop="s_vendorn">
                        <el-select v-model="form.s_vendor" placeholder="请选择" class="a">
                            <el-option key="xm" label="小米" value="小米"></el-option>
                            <el-option key="md" label="美的" value="美的"></el-option>
                            <el-option key="hw" label="华为" value="华为"></el-option>
                            <el-option key="hqb" label="华强北" value="华强北"></el-option>
                            <el-option key="smc" label="数码城" value="数码城"></el-option>
                            <el-option key="wjd" label="五金店" value="五金店"></el-option>
                            <el-option key="hm" label="虹猫" value="虹猫"></el-option>
                            <el-option key="zsc" label="制水厂" value="制水厂"></el-option>
                            <el-option key="bbg" label="步步高" value="步步高"></el-option>
                        </el-select>
                    </el-form-item>




                    <el-form-item label="仓库名称" prop="s_wid">
                        <el-select v-model="form.s_wid" placeholder="请选择" class="a" @change="findgid">
                            <el-option key="yi" label="一号仓库" value="1"></el-option>
                            <el-option key="er" label="二号仓库" value="2"></el-option>
                            <el-option key="san" label="三号仓库" value="3"></el-option>
                            <el-option key="si" label="四号仓库" value="4"></el-option>
                            <el-option key="wu" label="五号仓库" value="5"></el-option>
                        </el-select>
                       
                       
                        
                    </el-form-item>
                    <el-form-item label="提示 ">仓库包含的货品编码: {{ f.str }}</el-form-item>
                    
                    <el-form-item label="入库时间" class="a">
                        <el-col :span="11">
                            <el-form-item prop="sdate">
                                <div class="block">
                                    <el-date-picker v-model="form.sdate" type="datetime" placeholder="请输入入库时间"
                                        format="YYYY/MM/DD" />
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="负责人" prop="head">
                        <el-select v-model="form.head" placeholder="请选择" class="a">
                            <el-option key="lx" label="李旋" value="李旋"></el-option>
                            <el-option key="lak" label="刘奥康" value="刘奥康"></el-option>
                            <el-option key="nxh" label="聂绪恒" value="聂绪恒"></el-option>
                            <el-option key="xsq" label="肖松奇" value="肖松奇"></el-option>
                            <el-option key="td" label="唐燈" value="唐燈"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="货品编码" class="a">
                        <el-input v-model="form.s_gid" placeholder="请输入">
                            <!--  <el-option label="1" value="1" />
        <el-option label="2" value="2" /> -->
                        </el-input>
                    </el-form-item>
                    <!-- 表格 -->

                    <!-- <el-button @click="visible = true" >
                        货品信息
                        </el-button> -->
                    <el-form-item>
                        <el-button type="primary" @click="echo">{{ form.s_gid }} 号货品信息</el-button>

                    </el-form-item>

                    <el-drawer v-model="visible" width="400px" title="基本信息" :with-header="false" font-weight="bold"
                        size="35%">
                        <span>基本信息</span>

                        <el-form :model="form" label-width="100px">


                            <br><br>

                            <el-form-item label="货品类别" class="ac">
                                <el-input v-model="form.gcategory" placeholder="请输入" disabled="true" />
                            </el-form-item>
                            <el-form-item label="货品名字" class="ac">
                                <el-input v-model="form.gname" placeholder="请输入" disabled="true" />
                            </el-form-item>
                            <el-form-item label="货品规格" class="ac">
                                <el-input v-model="form.gmodel" placeholder="请输入" disabled="true" />
                            </el-form-item>
                            <el-form-item label="货品单价" class="ac">
                                <el-input v-model="form.gprice" placeholder="请输入" disabled="true" />
                            </el-form-item>
                            <el-form-item label="库存数量" class="ac">
                                <el-input v-model="form.goodnumber" placeholder="请输入" disabled="true" />
                            </el-form-item>
                            <el-form-item label="入库数量" class="ac" @input="countsinmoney">
                                <el-input v-model="form.sinbound" placeholder="请输入" />
                            </el-form-item>
                            <el-form-item label="入库金额" class="ac">
                                <el-input v-model="form.sinmoney" placeholder="请输入" disabled="true" />
                            </el-form-item>
                            <el-form-item label="最低库存" class="ac">
                                <el-input v-model="form.dlower" placeholder="请输入" disabled="true" />
                            </el-form-item>
                            <el-form-item label="最高库存" class="ac">
                                <el-input v-model="form.dupper" placeholder="请输入" disabled="true" />
                            </el-form-item>
                            <el-form-item label="提交人" prop="options">
                                <el-select v-model="form.approver" placeholder="请选择">
                                    <el-option key="lx" label="李旋" value="李旋"></el-option>
                                    <el-option key="lak" label="刘奥康" value="刘奥康"></el-option>
                                    <el-option key="nxh" label="聂绪恒" value="聂绪恒"></el-option>
                                    <el-option key="xsq" label="肖松奇" value="肖松奇"></el-option>
                                    <el-option key="td" label="唐燈" value="唐燈"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">表单提交</el-button>
                                <el-button @click="onReset">重置表单</el-button>
                            </el-form-item>
                        </el-form>

                    </el-drawer>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
import { useRouter } from 'vue-router'




export default {
    name: "baseform",
    setup() {
        const userRouter = useRouter()
        const rules = {
            name: [
                { required: true, message: "请输入表单名称", trigger: "blur" },
            ],
        };




        const Storage = () => {
            console.log('submit!')
        }

        const formRef = ref(null);
        const form = ref({
            s_type: '',
            s_vendor: '',
            s_wid: '',
            sdate: new Date(),
            head: '',


            s_gid: '',
            gcategory: '',
            gname: '',
            gmodel: '',
            gprice: '',
            goodnumber: '',
            sinbound: 0,
            sinmoney: 0,
            approver: '',
            dupper: '',
            dlower: ""
        });
        const f = ref({str:''})

        const findgid = () => {



            console.log(11111)
            axios({
                method: "post",
                url: 'http://localhost:8080/api/findgidbywidServlet',
                data:
                    form.value.s_wid

            }).then(function (resp) {
                console.log(resp.data.data)
                if (resp.data.flag == true) {
                    console.log(resp.data.message)
                    console.log( resp.data.data)
                    f.value.str = resp.data.data
                } else {
                    console.log(resp.data.message)
                }
            });
        }

        const countsinmoney = () => {
            form.value.sinmoney = form.value.sinbound * form.value.gprice
            console.log("form.value.sinmoney===" + form.value.sinmoney)
        }

        const visible = ref(false)
        const echo = () => {
            visible.value = true

            console.log(form.value.sdate)
            axios({
                method: "post",
                url: 'http://localhost:8080/api/findGoodsBygidServlet',
                data: {
                    s_gid: form.value.s_gid,
                    s_wid: form.value.s_wid,
                }
            }).then(function (resp) {
                console.log(resp.data.data)
                form.value.gcategory = resp.data.data.gcategory
                form.value.gname = resp.data.data.gname
                form.value.gmodel = resp.data.data.gmodel
                form.value.gprice = resp.data.data.gprice
                form.value.goodnumber = resp.data.data.goodnumber
                form.value.dupper = resp.data.data.dupper
                form.value.dlower = resp.data.data.dlower
                console.log("resp.data.data===" + resp.data.data)
            });




        }





        console.log(form.value)
        // 提交
        const onSubmit = () => {


            axios({
                method: 'post',
                url: 'http://localhost:8080/api/addStorageRecordServlet',
                data: form.value
            }).then(function (resp) {
                console.log(resp.data.data)
                ElMessage({
                    message: resp.data.message,
                    type: 'success',
                })
                userRouter.push({
                    name: 'in4',
                    params:
                        form.value

                })
            });

        };
        // 重置
        const onReset = () => {
            /* formRef.value.resetFields(); */
            location.reload()
        };



        return {
            visible,
            app,
            Storage,
            rules,
            formRef,
            form,
            onSubmit,
            onReset,
            echo,
            visible,
            countsinmoney,
            userRouter,
            findgid,
            f
        };
    },
};

</script>
<style >
.ac {
    width: 500px;
}

.a {
    width: 400px;
}
</style>